<script lang="ts" setup>
import { onMounted, onUnmounted, ref, getCurrentInstance } from "vue"
import useDraw from "@/utils/useDraw"
const { proxy }: any = getCurrentInstance()
// * 适配处理
const { calcRate, windowDraw, unWindowDraw } = useDraw()
const bar = ref(null)

/**绘制柱状图 */
const myChart = ref<any>()
const barOption = ref<any>()

const renderChart = () => {
  if (myChart.value == null) {
    const myDom = bar.value
    myChart.value = proxy.$echarts.init(myDom)
  }

  barOption.value = {
    title: [
      {
        text: "凡思特动态"
      }
    ],
    xAxis: {
      type: "category",
      data: ["售后客服", "电商运营", "程序开发", "售后客服", "电商运营", "程序开发"],
      axisLine: {
        show: true,
        onZero: true,
        symbol: "none",
        lineStyle: {
          color: "#000"
        }
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      show: false,
      type: "value",
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        show: false
      }
    },
    //图表与容器的位置关系
    grid: {
      left: "3%", // 与容器左侧的距离
      right: "3%", // 与容器右侧的距离
      top: "11%", // 与容器顶部的距离
      bottom: "12%" // 与容器底部的距离
    },

    series: [
      {
        data: [520, 600, 450, 380, 370, 510, 120, 200, 150, 620, 600, 450],
        type: "bar",
        backgroundStyle: {
          color: "rgba(111, 111, 22, 1)"
        },
        //坐标轴显示器的文本标签
        label: {
          show: true,
          position: "top",
          color: "#000"
        },
        //柱条颜色
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(0,234,223,0.9)" // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(0,234,223,0.3)" // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        },
        animationEasing: "linear",
        animationEasingUpdate: "quadraticIn", //数据更新时的缓动效果
        animationDurationUpdate: 300, //数据更新动画的时长
        animation: true //开启动画
      }
    ],
    legend: {
      show: true
    },
    animationDuration: 0,
    animationDurationUpdate: 3000,
    animationEasing: "linear",
    animationEasingUpdate: "linear"
  }
  //此处使用定时器setInterval循环刷新柱状图的值,每次刷新数据均不同
  setInterval(() => {
    for (let i = 0; i <= 11; i++) {
      //定义i确保柱图的每一项都能被刷新
      barOption.value.series[0].data[i] = Math.round(Math.random() * 600) + 1 //数据随机取值1-600,不要为0,如果为0的话该柱就会消失
    }
    myChart.value.setOption(barOption.value, true) //每刷新一次重新显示图表
  }, 200)
}

// 生命周期
onMounted(() => {
  windowDraw()
  calcRate()
  // console.log(bar.value)
  renderChart()
})

onUnmounted(() => {
  unWindowDraw()
})
</script>
<template>
  <div style="width: 500px; height: 500px">
    <!--柱图-->
    <div ref="bar" id="bar" />
  </div>
</template>
<style lang="scss" scoped>
#bar {
  width: 100%;
  height: 100%;
  position: relative;
  // left: 5.7rem;
}
</style>
